<template>
  <div>
    <div class="bigbox">
      <img src="../assets/img/pic/bg/login.png" alt="" />
      <img src="../assets/img/pic/logo/orange.png" alt="" class="title" />

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password:""
      },
      rules: {
        username: [
          { required: true, message: "请输入正确的用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$api.reqlogin(this.ruleForm).then((res)=>{
              // console.log(6);
              // console.log(res);
              localStorage.setItem("token",JSON.stringify(res.data.list))
              // localStorage.setItem("token",res.data.list)
              // localStorage.setItem("token",res.data.list.token)
            
            
              this.$message({
                message:"登录成功",
                type: "success",
              })
              this.$router.push("/index")
            })
            // alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },




      

  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.bigbox {
  width: 100vw;
  height: 100vh;
  background-color: #ec6d50;
  position: relative;
  img {
    width: 50%;
    height: 70%;
    margin-left: 40%;
    margin-top: 100px;
  }
  .title {
    width: 400px;
    height: 100px;
    // background-color: aqua;
    position: absolute;
    right: 260px;
    top: 130px;
  }
  .demo-ruleForm{
    position: absolute;
    top: 350px;
    right: 360px;
  }
}

</style>
